<template>
  <div v-if="showComfirm" class="comfirm flex flex-col">
    <div class="pay-card flex-1 flex flex-s text-center">
      <div class="card">
        <div class="text-bold">
          <span class="close" @click="close">
            <img :src="closePng" width="16" />
          </span>
          <span> 请输入支付密码 </span>
        </div>
        <div class="my-32">
          <div class="mb-4 text-222">充值到零钱</div>
          <div>
            <span class="text-24 text-dark">￥</span>
            <span class="text-32 text-dark money">
              {{ Number(rechargeMoney).toFixed(2) }}
            </span>
          </div>
        </div>
        <ul class="flex justify-center">
          <li v-for="(item, key) in password" :key="key" class="flex flex-s">
            <template v-if="item">
              <div class="dot"></div>
            </template>
          </li>
        </ul>
      </div>
    </div>
    <div class="keyboard">
      <div
        v-for="item in keyboard"
        :key="item"
        class="keyboard-key flex flex-s"
        :class="[`a-${item}`]"
        @click="handleClick(item)"
      >
        <template v-if="item === 'n'"> 0 </template>
        <template v-else-if="item === 'x'">
          <img :src="deletePng" width="24" />
        </template>
        <template v-else> {{ item }} </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, toRef } from 'vue';
  import deletePng from '@/views/me/assets/delete.png';
  import { showLoading } from '@/views/components/loading/loading';
  import { feedback } from '@/views/components/feedback/feedback';
  import { getUserStore } from '@/store/user/utils';
  import closePng from '@/views/me/assets/close.png';
  import { showComfirm } from './data';
  import { rechargeMoney, showRecharge } from '../recharge';

  const raw = ['', '', '', '', '', ''];
  const password = ref(raw);

  const keyboard = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'n', 'x'];

  const pointer = ref(0);
  const resetPassword = () => {
    password.value = ['', '', '', '', '', ''];
    pointer.value = 0;
  };
  const handleClick = (key: string) => {
    const store = getUserStore();

    if (key === 'x') {
      if (pointer.value > 0) {
        pointer.value -= 1;
        password.value[pointer.value] = '';
      }
    } else if (pointer.value <= 5) {
      if (key === 'n') {
        password.value[pointer.value] = '0';
        pointer.value += 1;
      } else {
        password.value[pointer.value] = key;
        pointer.value += 1;
      }
      /* 校验密码每一项都不为空 */
      if (password.value.every((item) => item)) {
        const callback = () => {
          const money = Number(rechargeMoney.value);
          store.master.pocketMoney += Number(money);
          feedback({
            money: Number(money),
            show: true,
            tips: '充值成功',
            callback: () => {
              showComfirm.value = false;
              showRecharge.value = false;
            },
          });
          rechargeMoney.value = '';
        };
        showLoading(
          {
            type: 'pay',
          },
          callback
        );
        resetPassword();
      }
    }
  };

  const close = () => {
    showComfirm.value = false;
    resetPassword();
  };
</script>

<style lang="scss" scoped>
  @import './style';
</style>
